<template>
    <div class="">
      <el-table :data="orders" style="width: 100%">
      <el-table-column
        align="center"
        fixed
        prop="order_id"
        label="订单编号"
        width="120"
      />
      <el-table-column
        align="center"
        prop="order_service"
        label="订单类型"
        width="150"
      >
      <template #default="scope">{{scope.row.order_service==1?'上门喂宠':scope.row.order_service==2?'上门遛宠':'寄养服务'}}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="order_status"
        label="订单状态"
        width="150"
      >
      <template #default="scope">{{ zhuangtai(scope.row.order_status) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="order_sum"
        label="订单价钱"
        width="150"
      />
      <el-table-column
        align="center"
        prop="order_people.name"
        label="服务人员"
        width="150"
      >
      <template #default="scope">{{(scope.row.order_people.name) }}</template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="order_pet.pet_name"
        label="服务宠物"
        width="150"
      >
      <template #default="scope"><span v-for="(item,index) in scope.row.order_pet" :key="item.pet_id">{{(item.pet_name) }};</span></template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="order_package"
        label="订单套餐"
        width="150"
      />
      <el-table-column
        align="center"
        prop="create_time"
        label="创建时间"
        width="150"
      />
      <el-table-column
        align="center"
        prop="start_time"
        label="开始时间"
        width="150"
      />
      <el-table-column
        align="center"
        prop="end_time"
        label="结束时间"
        width="150"
      />
      <el-table-column
        align="center"
        prop="order_address"
        label="服务地址"
        width="150"
      >
        <template #default="scope">{{ scope.row.order_address.split(';')[0] }}</template>
        </el-table-column>
      <el-table-column align="center" fixed="right" min-width="150">
        <template #header>
          <div class="header">
            <el-input
              v-model="search"
              size="small"
              placeholder="输入订单编号搜索"
              @input="getOneorder"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
      style="margin-top: 20px;" 
    :default-page-size="Page_Size" 
    @current-change="changepage($event)" 
    background layout="prev, pager, next" 
    :total="total" />
    </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import {ref,reactive,onBeforeMount,computed} from 'vue'
  import {getorders,getoneorder} from '@/service/api/order'
  import {ElMessage} from 'element-plus'
  let orders=ref([])
  let Page_Size=ref(10)
  let Page_No=ref(1)
  let search=ref('')
  let total=ref(0)
onBeforeMount(()=>{
  getOrders()
})


function debounce(fn, delay) {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

const getOneorder=debounce(sousuo,500)
function sousuo(e){
  if(e==''){
    return getOrders()
  }
  getoneorder({order_id:e}).then(res=>{
    if(res.data.code===200){
      orders.value=[res.data.data]
    }else if(res.data.code===400){
      ElMessage({
        message: "没有该订单",
        type: "error",
      });
    }
  })
}
function changepage(e){
  Page_No.value=e
  getOrders()
}
function zhuangtai(e){
  switch(e){
    case '1':return '待进行'
    case '2':return '进行中'
    case '3':return '已完成'
    case '4':return '待评价'
    case '5':return '已取消'
    case '6':return '退款'
    case '7':return '已评价'
  }
}
  function getOrders(){
    getorders({
      Page_No:Page_No.value,
      Page_Size:Page_Size.value,
    }).then((res)=>{
      orders.value=res.data.data
      total.value=res.data.total
    })
  }
  </script>
  
  
  <style lang="scss" scoped>
.pagination{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
  